<template>
	<h3>MyLeft组件</h3>
	n的值：{{n}}
	<button type="button" @click="add">add</button>
	<h4>引用public目录的静态资源</h4>
	<img :src="img1" alt="" class="img-thumbnail" />
</template>

<script setup>
   import {onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
	const img1=ref('/public/1.png')
	const n=ref(1)
	const add=()=>{
		n.value++
	}
	
	onMounted(()=>{
		console.log('MyLeft组件被挂载了')
	})
	
	onUnmounted(()=>{
		console.log('MyLeft组件被销毁了')
	})
	//跟缓存相关的生命周期钩子
	onActivated(()=>{
		console.log('MyLeft组件被激活了')
	})
	onDeactivated(()=>{
		console.log('MyLeft组件被缓存了')
	})
	
</script>

<style scoped>
</style>